<template>
  <div class="login">
    <el-container>
      <el-header>
        <img src="https://lightly.teamcode.com/assets/logo.3daf54a7.svg"/>
      </el-header>

      <el-container>
        <el-main>
          <div class="out">
            <el-carousel indicator-position="outside" @change="carouselChange">
              <el-carousel-item v-for="item in carousels" :key="item">
                <img :src="item.url" style="height:100%; width:100%;" alt="图片丢失了"/>
              </el-carousel-item>
            </el-carousel>
            <div style="font-size: 25px">{{carouselContent}}</div>
          </div>
        </el-main>

        <el-aside width="40%">
          <el-card class="box-card" shadow="always">
            <div class="welcome">欢迎回来</div>
            <div class="authorized">
              <div>
                <input v-model="username" placeholder="账号"/>
              </div>
              <div>
                <input v-model="password" type="password" placeholder="密码"/>
              </div>
            </div>

            <div class="line-or">
              <div class="line">
                <hr/>
              </div>
              <div style="font-size: 14px">或</div>
              <div class="line">
                <hr/>
              </div>
            </div>

            <div class="icon-group">
              <div v-for="item in icons" :key="item">
                <img :src="item"/>
              </div>
            </div>

            <div class="login-register">
              <button @click="loginOrRegister">注册登录</button>
            </div>
            <div style="font-size: 14px; margin-top: 30px">注册或登录则表示您已同意 <span style="color: #1890FF">服务条款。</span></div>
          </el-card>
        </el-aside>

      </el-container>
    </el-container>
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue';
import { useRouter } from 'vue-router'

import { ElMessage } from 'element-plus'

import { login, register } from '@/api/index'

export default defineComponent({
  name: 'login',

  components: {
  },

  setup() {
    const username = ref('159879875')
    const password = ref('123456')

    const router = useRouter()
    const carousels = reactive([{
        url: 'https://lightly.teamcode.com/assets/login-1.5e1040a7.png',
        content: 'Light让写代码变得更简单'
      },
      {
        url: 'https://lightly.teamcode.com/assets/login-2.f16dc028.png',
        conetnt: '自动检测和生成开发环境'
      },
      {
        url: 'https://lightly.teamcode.com/assets/login-3.aa1862d4.png',
        content: '项目代码/资源能免费存储在云端'
      }
    ])
    const carouselContent = ref(carousels[0].content)
    const icons = ref(['https://lightly.teamcode.com/assets/icon-wechat.807ab245.svg', 
      'https://lightly.teamcode.com/assets/icon-qq.deef4773.svg', 'https://lightly.teamcode.com/assets/icon-github.833cfb11.svg'])
     
    const carouselChange = (idx) => {
      if (idx == 1) {
        carouselContent.value = '自动检测和生成开发环境'
        return
      }
      carouselContent.value = carousels[idx].content
    }

    //登录
    const callLogin = (username, password) => {
      if (username.length == 0 || password.length == 0) {
        ElMessage.error('信息不完整')
        return
      }
      login(username, password).then((res) => {
        if (res.code != 0) {
          ElMessage.error(res.msg)
          return
        }
        //登录成功
        ElMessage.success('登录成功')
        sessionStorage.setItem('token', res.data)
        router.replace('/dashboard')
      })
    }

    //登录或者注册，如果不存在该账号就自动注册并登录
    const loginOrRegister = () => {
      if (username.value.length == 0 || password.value.length == 0) {
        ElMessage.error('信息不完整')
        return
      }
      //发起一个登录请求，如果存在这样的一个账号，根据密码判断是否成功；如果不存在，则自动注册
      login(username.value, password.value).then((res) => {
        if (res.code == 250002) {
          //账号不存在，调用注册接口
          register(username.value, password.value).then((re) => {
            if (re.code == 250001) {
              ElMessage.warning(re.msg)
            } else if (re.code == 0) {
              //注册成功，进行登录
              callLogin(username.value, password.value)
            }
          })
        } else if (res.code == 250003) {
          //账号或密码错误
          ElMessage.error(res.msg)
        } else if (res.code == 0) {
          //登录成功
          ElMessage.success('登录成功')
          sessionStorage.setItem('token', res.data)
          router.replace('/dashboard')
        }
      })
    }
    return {
      carousels,
      carouselChange,
      carouselContent,
      icons,
      loginOrRegister,
      username,
      password
    }
  }
});
</script>

<style scoped lang="scss">
.app {
  text-align: center;
  height: 95vh;
  margin-top: 3px;

  .el-header {
    display: flex;
    background-color: #F0F5FF;

    img {
      width: 130px;
      margin-left: 20px;
    }
  }

  .el-aside {
    background-color: #F0F5FF;
    .el-card {
      margin-top: 10%;
      width: 58%;
      height: 70%;
      border-radius: 25px;
      padding-left: 3%;

      .welcome {
        font-size: 40px;
        text-align: left;
        margin-top: 1%;
        margin-bottom: 16px;
      }

      .authorized {
        input {
          width: 295px;
          height: 42px;
          background: #F1F1F1;
          border: 0;
          border-radius: 5px;
          margin-top: 20px;
          padding-left: 20px;
        }

        // input::-webkit-input-placeholder {
        //   position: relative;
        //   left: 20px;
        // }

        input:focus {
          outline: 1px solid #7A72FF;
        }
      }

      .line-or {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;

        .line {
          width: 40%;
          margin-top: 9px;

          hr {
            background-color: #EBEBEB;
            height: 1px;
            border: none;
          }
        }
      }

      .icon-group {
        margin-top: 20px;
        display: flex;

        div {
          width: 38px;
          height: 38px;
          border-radius: 10px;
          border: #D3D3D3 solid 1px;

          img {
            display: block;
            margin: 5px auto;
          }
        }

        div:not(:nth-child(1)) {
          margin-left: 8%;
        }
      }

      .login-register {
        margin-top: 10%;

        button {
          cursor: pointer;
          background-color: #5590FF;
          color: white;
          width: 315px;
          height: 46px;
          border: 0px;
          border-radius: 5px;
        }

        button:hover {
          background-color: #3C7FFF;
        }
      }
    }
  }

  .el-main {
    height: 88vh;
    padding: 0;
    background-color: #ECF5FF;

    .out {
      width: 40%;
      margin: 15% 0;
      padding-left: 30%;
    }
  }
}
</style>